<template>
   
<div :id="'flowChart_'+flowId" class="flowChart">
</div>
</template>

<script>
   import {Flow} from '../apis/flow.js';
   import 'gojs/release/go.js'
    export default {
		props:['flowId'], //声明props
        data () {
            return {
				flow :{}
            }
        },
		watch:{
		
		   '$vnode' (to, from) {

                   
            }
			
		},
		components:{},
        mounted() {
			 var me=this;
			 Flow.GetNodes(this.flowId).then(result=>{
				    me.flow =result.flow;
				    var flowSteps =result.flow.FlowSteps;
					var flowStepLinks =result.flowStepLinks;
					
					var $ = go.GraphObject.make;
					var myDiagram =
                       $(go.Diagram, "flowChart_"+me.flowId,
                           {
                             initialContentAlignment: go.Spot.Center,  // center the content
                             "undoManager.isEnabled": true  // enable undo & redo
                           }
                       );
					 // define the Link template
                    myDiagram.linkTemplate =
                      $(go.Link,  // the whole link panel
                            { routing: go.Link.Orthogonal, corner: 5, selectable: true },
                            $(go.Shape, { strokeWidth: 3, stroke: '#424242' }),
                            $(go.Shape,  //  the arrowhead
                                        { name: "ARWSHAPE", toArrow: "Standard",scale: 2, fill: "#D4B52C" })
					  );  // the gray link shape
					 // define a simple Node template
					
                       myDiagram.nodeTemplate =
                           $(go.Node, "Auto",  // the Shape will go around the TextBlock
						        
						        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                                $(go.Shape, 
								   "RoundedRectangle", 
								   { strokeWidth: 2,fill:"white",
									   click:me.clickNode},
                                   // Shape.fill is bound to Node.data.color
                                   //new go.Binding("fill", "color")
								),
								$(go.Panel, "Horizontal",
								   $(go.Picture, new go.Binding("source", "iconImage"),
                                     { 
									   row: 1, 
									   width: 24, 
									   height: 24 ,
									   click:me.clickNode
									 }
								   ),
                                   $(go.TextBlock,
                                          { margin: 8,row: 2,width:60,
									   click:me.clickNode },  // some room around the text
                                            // TextBlock.text is bound to Node.data.key
                                          new go.Binding("text", "name")
								   )
								)
                           );

                      // but use the default Link template, by not setting Diagram.linkTemplate

                      // create the model data that will be represented by Nodes and Links
                         myDiagram.model = new go.GraphLinksModel(
                                  /*[
                                    { key: "Alpha", color: "lightblue" },
                                    { key: "Beta", color: "orange" },
                                    { key: "Gamma", color: "lightgreen" },
                                    { key: "Delta", color: "pink" }
									
									
                                  ],*/
								  flowSteps.map(item=>{
										return {
										  key:item.Id, name:item.ComponentId.Name ,//color:"orange",
										  loc:item.X+" "+item.Y,
										  iconImage : "/static/img/icons/"+item.Ui.iconImage,
										  componentId :item.ComponentId.Id,
										  flowId : me.flowId,
										  componentName :item.ComponentId.Name,
										  projectVersionId : me.flow.ProjectVersionId.Id
										}
									}),
                                  /*[
                                    { from: "Alpha", to: "Beta" },
                                    { from: "Alpha", to: "Gamma" },
                                    { from: "Beta", to: "Beta" },
                                    { from: "Gamma", to: "Delta" },
                                    { from: "Delta", to: "Alpha" }
									
                                  ]*/
								    flowStepLinks.map(item=>{
										return {from:item.SourceStepId,to:item.TargetStepId}
									})
								
								);
					
			 });
        }
		,methods:{

           clickNode(eventObject, clickObject){
			   this.$emit("selectComponent",clickObject.part.data )
			
		   }

		}
    }
</script>

<style>
.flowChart{
	
	width:100%;
	border: solid 1px black;
	height:480px;
}

</style>